<template>
  <table class="goods-table">
    <thead>
      <tr>
        <th width="400">商品信息</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>实付</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="i in 3" :key="i">
        <td>
          <a href="javascript:;" class="product">
            <img src="https://yanxuan-item.nosdn.127.net/f7a4f643e245d03771d6f12c94e71214.png"/>
            <div class="info">
              <p class="name ellipsis-2">
                原创设计一体化机化机身 精致迷你破壁机350mL
              </p>
              <p class="attr ellipsis">
                <span>颜色：绿色</span>
                <span>尺寸：10寸</span>
              </p>
            </div>
          </a>
        </td>
        <td>¥1899</td>
        <td>1</td>
        <td>¥1899</td>
        <td>¥1899</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'checkout-goods'
}
</script>

<style scoped lang='less'>
.goods-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
  th {
    font-weight: normal;
    line-height: 60px;
    background: #f5f5f5;
    &:first-child {
      text-align: left;
      padding-left: 20px;
    }
  }
  td {
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
    &:first-child {
      padding-left: 20px;
      border-left: 1px solid #f5f5f5;
    }
    &:last-child {
      border-right: 1px solid #f5f5f5;
    }
  }
  .product {
    display: flex;
    padding: 20px 0;
    img {
      width: 70px;
      height: 70px;
      border: 1px solid #f5f5f5;
    }
    .info {
      padding-left: 20px;
      text-align: left;
      .name {
        margin-bottom: 6px;
        line-height: 22px;
      }
      .attr {
        color: #999;
        span {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
